<template>
  <div>
    <h2>组合API-侦听器</h2>
    <hr>
    <div>{{num}}</div>
    <div>{{obj.msg}}</div>
    <div>{{n1}}----{{n2}}</div>
    <div>{{info.msg1}}</div>
    <div>{{msg.info}}</div>
  </div>
</template>
<script>
import { ref, watch, reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 1. 侦听器-基本类型数据
    const num = ref(0)

    // 被侦听的数据必须是响应式的
    watch(num, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })

    // 2. 侦听器-侦听引用类型数据
    const obj = reactive({
      msg: 'hello'
    })

    watch(obj, () => {
      // console.log(o1, o2)
      console.log(obj)
    })

    // 3. 侦听多个数据
    const n1 = ref(123)
    const n2 = ref(456)
    watch([n1, n2], (v1, v2) => {
      // v1表示新值，类型是数组，数据的顺序与被侦听的值的顺序一致
      // v2表示旧值，类型是数组，数据的顺序与被侦听的值的顺序一致
      console.log(v1, v2)
    })

    // 4. 侦听对象中个别属性
    const info = reactive({
      msg1: 'hello',
      msg2: 'nihao'
    })

    // 如果侦听的内容是表达式，那么需要用函数的形式
    watch(() => info.msg1, (v1, v2) => {
      console.log(v1, v2)
    })

    // 5. 侦听器的配置选项
    // const msg = ref('welcome')
    // watch(msg, () => {
    //   console.log('welcome')
    // }, {
    //   // 控制初次监听就触发一次回调
    //   immediate: true
    // })

    const msg = reactive({
      info: 'welcome',
      obj: {
        abc: 'hi'
      }
    })
    // 如果被侦听的数据是对象的一个属性，但是值依然是对象，那么里面的对象的属性不可以被侦听到
    // 添加watch的配置选项deep，值设置为true
    watch(() => msg.obj, () => {
      console.log('welcome')
    }, {
      // 控制初次监听就触发一次回调
      immediate: true,
      // 深度侦听
      deep: true
    })

    return { num, obj, n1, n2, info, msg }
  }
}
</script>
